<template>
  <div class="contioner arco-tabs-content" v-loading="pageData.loadingUp">
    <div class="my-tool-bar" style="margin-bottom: 5px">
      <a-space>
        <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
        <el-button type="success" :icon="CirclePlus" @click="newData('新增')">新增</el-button>
        <el-button plain :icon="Delete" @click="deleteData">删除</el-button>
      </a-space>
    </div>
    <div style="background-color: #f0f2f5; height: 10px"></div>
    <div :style="{ height: '90%', padding: '10px' }" style="background: #fff">
      <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
    </div>
    <a-drawer
      cancel-text="关闭"
      ok-text="保存"
      popup-container=".arco-tabs-content"
      height="40vh"
      placement="bottom"
      :visible="pageData.showAdd"
      unmountOnClose
      @cancel="pageData.showAdd = false"
      @ok="save"
      :mask-closable="false"
    >
      <template #title> {{ pageData.type }}</template>
      <!-- <a-form size="small" :model="query" layout="inline">
        <a-form-item label="出库单号">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.stockOutCode"
          />
        </a-form-item>
        <a-form-item label="资产类型">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.customName"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.customOrderNo"
          />
        </a-form-item>
        <a-form-item label="创建人">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.customOrderNo"
          />
        </a-form-item>
        <a-form-item label="创建时间" prop="startDate">
          <a-date-picker  popup-container="html" 
            v-model="query.startDate"
            :style="{ width: '200px' }"
            class="bacClass"
          />
        </a-form-item>
        <a-form-item label="最后修改人">
          <a-input
            allow-clear
            :style="{ width: '185px' }"
            class="bacClass"
            v-model="query.customOrderNo"
          />
        </a-form-item>
      </a-form> -->
      <el-form ref="ruleFormRef" :model="query" label-width="85px" class="demo-query" status-icon>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="资产类型" prop="carPlate">
              <el-input v-model="query.carPlate" style="width: 200px" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="carPlate">
              <el-input v-model="query.carPlate" style="width: 200px" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人" prop="carPlate">
              <el-input v-model="query.carPlate" style="width: 200px" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间" prop="putGoodsDepartment">
              <el-date-picker
                type="date"
                placeholder="选择开始日期"
                v-model="query.stockOutDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 200px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="最后修改人" prop="carPlate">
              <el-input v-model="query.carPlate" style="width: 200px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </a-drawer>
  </div>
</template>
      
  <script lang="ts" setup>
// 引入element提示
import { ElMessage, ElMessageBox } from 'element-plus'
//引入封装post
import { post } from '@/api/http'
import { tableColumns } from './SetTheFixedAssetType'
import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
import { Search, Delete, CirclePlus } from '@element-plus/icons-vue'
let pageData = reactive<any>({
  showAdd: false,
  type: '',
  loadingUp: false,
})
let query = reactive<any>({
  stockOutCode: '',
  customName: '',
  customOrderNo: '',
  carPlate: '',
  stockOutType: '',
  companyName: '',
  companyId: '',
  warehouseName: '',
  endDate: '',
  startDate: '',
})
tableColumns.push({
  headerName: '操作',
  field: 'ouihadpc',
  resizable: 'false',
  filter: 'false',
  sortable: 'false',
  width: 90,
  // lockPosition: 'right',
  pinned: 'right',
  cellRenderer: buttionRender,
  cellRendererParams: {
    buttonList: [
      {
        type: 'success',
        text: '修改',
        typeName: 'el-button',
        Callback: (data: any) => {
          newData('修改')
        },
      },
    ],
    eltagSize: 0,
  },
})
let refgridOption = ref<any>()
let configaggrid = ref({
  url: 'wms/GreyStockOut/getPage', //接口路径
  queryData: {},
  paginationShow: true, //分页是否显示
  invokeiIterface: true, //是否调用接口
  rowMultiSelectWithClick: false, //点击行是否多选
  column: tableColumns,
})
const newData = (type: string) => {
  pageData.type = type
  pageData.showAdd = true
}
const deleteData = () => {
  const selectedData = refgridOption.value.getSelectedRows()
  if (selectedData.length == 0) {
    ElMessage.warning('请勾选您要删除的单据')
    return
  }
  let condition = selectedData.every((item: any) => item.auditState == 1)
  if (condition) {
    ElMessage.warning('状态为审核通过不可删除!')
    return
  }
  ElMessageBox.confirm('确认删除选中单据?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      try {
        pageData.loadingUp = true
        let arr: any
        arr = []
        selectedData.map((item: any) => {
          arr.push(item.id)
        })
        let { code, message } = await post({
          url: 'wms/GreyStockOut/delete',
          data: arr,
        })
        if (code == 200) {
          ElMessage.success('审核成功')
          pageData.loadingUp = false
          // refgridOption.value.setQuery(query)
          return
        }
        ElMessage.error(message)
      } finally {
        pageData.loadingUp = false
      }
    })
    .catch(() => {})
}
const save = async () => {
  if (pageData.type == '新增') {
    try {
      pageData.loadingUp = true
      let { code, message } = await post({
        url: '/wms/GreyStockOut/updateList',
        data: query,
      })
      if (code == 200) {
        ElMessage.success('新增成功')
        pageData.loadingUp = false
        refgridOption.value.setQuery(query)
        pageData.showAdd = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loadingUp = false
    }
  }
  if (pageData.type == '修改') {
    try {
      pageData.loadingUp = true
      let { code, message } = await post({
        url: '/wms/GreyStockOut/updateList',
        data: query,
      })
      if (code == 200) {
        ElMessage.success('修改成功')
        pageData.loadingUp = false
        refgridOption.value.setQuery(query)
        pageData.showAdd = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loadingUp = false
    }
  }
}
onMounted(() => {
  getList()
})
const getList = () => {
  refgridOption.value.setQuery()
}
</script>
<script lang="ts">
export default defineComponent({
  name: 'SetTheFixedAssetType',
})
</script>
<style scoped>
.contioner {
  height: 100%;
}

.contentPrint {
  width: 100%;
  display: flex;
  justify-content: space-between;

  color: #000 !important;
}

.printLeft {
  width: 56%;
}

.printTitle {
  font-size: 22px;
  font-weight: 700;
  margin-top: 20px;
}

.printRight {
  width: 43%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.ermPrint {
  display: flex;
  justify-content: center;
  /* flex-flow: column wrap; */
  align-items: center;
}

.erm {
  width: 160px;
  height: 50px;
  background: #999;
}

.formPrint {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.ban {
  width: 50%;
  margin-bottom: 5px;
}

.quan {
  width: 100%;
  margin-bottom: 5px;
}

table {
  text-align: center;
  color: #000;
}

td {
  color: #000;
}

th {
  color: #000;
}

.tablePrint {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  flex-flow: row wrap;
}

.footerPrint {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  color: #000;
}

.createTime {
  width: 100px;
}

.printw {
  width: 30%;
  margin-bottom: 5px;
}

:deep(.el-dialog__body) {
  color: #000;
}
.my-tool-bar {
  background: #fff;
  padding: 18px;
}
:deep(.el-input__inner) {
  color: #3b3a3a;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #474849 inset;
}
:deep(.el-form-item__label) {
  color: #202021;
}
:deep(.arco-drawer-container) {
  z-index: 1000 !important;
}
</style>
      